<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="./banner.css" />
    </head>
    <body>
        <div class="banner">
            <ul class="imgBox clearFix">
                <li style="background-color: red">1</li>
                <li style="background-color: orange">2</li>
                <li style="background-color: green">3</li>
                <li style="background-color: pink">4</li>
                <li style="background-color: yellow">5</li>
            </ul>

            <!-- 指示器存放处 -->
            <ol class="pointBox"></ol>

            <div class="leftRightTabs">
                <a href="javascritp:;" class="left"><</a>
                <a href="javascritp:;" class="right">></a>
            </div>
        </div>
        <script>
            // 最外层的盒子
            const bannerBox = document.querySelector(".banner");

            // 幻灯片slider所在的盒子 ul
            const imgBox = bannerBox.querySelector("ul");

            // 指示器容器
            const pointerBox = bannerBox.querySelector("ol");

            // 左右按钮
            const leftRightTabs = bannerBox.querySelector(".leftRightTabs");

            // 全部滑动页
            const sliders = document.querySelectorAll("ul>li");
            const boxWidth = parseInt(
                window.getComputedStyle(sliders[0]).width
            );

            leftRightTabs.onclick = function (e) {
                if (e.target.className === "left") {
                    // console.log("left");
                    moveLeft();
                }
                if (e.target.className === "right") {
                    // console.log("right");
                    moveRight();
                }
            };

            let index = 0;
            function moveLeft() {
                index --
                index = index < 0 ? 0:index
                // imgBox.style.left = -boxWidth * index + "px";
                move(imgBox,"left",-boxWidth * index)
            }

            function moveRight() {
                index++;
                index = index > 4 ? 4 : index;
                // imgBox.style.left = -boxWidth * index + "px";
                move(imgBox,"left",-boxWidth * index)
            }

            function move(element,attr,target){
                let currentValue = parseInt(window.getComputedStyle(element)[attr])
                let speed = (target - currentValue)/50

                let animTimer = setInterval(() => {

                    currentValue += speed
                    element.style[attr] = currentValue + "px"

                    if(parseInt(element.style[attr]) === target){
                        clearInterval(animTimer)
                    }
                }, 20);
            }
        </script>
    </body>
</html>
